<!--
 * @Description:
 * @version: 档案管理
 * @Author: 陈捷
 * @Date:  2022-04-07 14:43:13
 * @LastEditors: 陈捷
 * @LastEditTime:  2022-04-07 14:43:13
-->
<template>
  <van-form @submit="search">
    <van-row>
      <van-col span="18">
        <div class="cardbody" style="margin: 10px">
          <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="地区"
            placeholder="请选择所在地区"
            @click="show = true"
          />
          <van-popup v-model="show" round position="bottom">
            <van-cascader
              v-model="cascaderValue"
              title="请选择所在地区"
              :options="options"
              @close="show = false"
              @finish="onFinish"
            />
          </van-popup>
          <van-field
            v-model="cardNumber"
            placeholder="请输入身份证号码"
            label="身份证号"
            @touchstart.native.stop="showCardNumber = true"
            @focus="forbid"
          />
          <van-number-keyboard
            v-model="cardNumber"
            :show="showCardNumber"
            extra-key="X"
            close-button-text="完成"
            @blur="showCardNumber = false"
          />
          <van-field v-model="name" placeholder="请输入姓名" label="姓名" />
        </div>
      </van-col>
      <van-col span="6">
        <van-button
          round
          block
          class="search"
          native-type="submit"
          :disabled="submiting"
          :loading="submiting"
          loading-text="查询中..."
        >查询</van-button>
      </van-col>
      <van-col span="24">
        <div class="cardbody" style="margin: 10px">
          <h3 style="padding: 0">查询结果</h3>
          <Loading v-if="loading" />
          <div v-else>
            <div class="tab-ul">
              <van-row gutter="20">
                <!-- 开始循环 -->
                <van-col span="12">
                  <div class="li-back">
                    <div class="li-left">
                      <img src="@/assets/images/icon/girl.png" class="act">
                    </div>
                    <div class="li-right">
                      <h3>昌群以<span>183*****1688</span></h3>
                      <p>3205*****0191</p>
                    </div>
                  </div>
                </van-col>
                <van-col span="12">
                  <div class="li-back">
                    <div class="li-left">
                      <img src="@/assets/images/icon/girl.png" class="act">
                    </div>
                    <div class="li-right">
                      <h3>哈莲<span>156****2297</span></h3>
                      <p>3205*****0191</p>
                    </div>
                  </div>
                </van-col>
                <van-col span="12">
                  <div class="li-back">
                    <div class="li-left">
                      <img src="@/assets/images/icon/girl.png" class="act">
                    </div>
                    <div class="li-right">
                      <h3>单宏爱<span>181****2656</span></h3>
                      <p>3205*****0191</p>
                    </div>
                  </div>
                </van-col>
                <van-col span="12">
                  <div class="li-back">
                    <div class="li-left">
                      <img src="@/assets/images/icon/girl.png" class="act">
                    </div>
                    <div class="li-right">
                      <h3>玉桂<span>144****17144</span></h3>
                      <p>32020****82222</p>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
        <NoData v-if="false" />
      </van-col>
    </van-row>
  </van-form>
</template>

<script>
import NoData from '@/components/nodata/Index'
import Loading from '@/components/loading'

export default {
  name: 'ArchivalInquiry',
  // import引入的组件需要注入到对象中才能使用
  components: { NoData, Loading },
  data() {
    // 这里存放数据
    return {
      loading: false,
      active: 0,
      showCardNumber: false,
      submiting: false,
      street: '', // 所属街道,
      cardNumber: '', // 身份证号码
      name: '', // 姓名
      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '新安街道卫生服务中心',
          value: '330000'
        }
      ]
    }
  },
  methods: {
    forbid() {
      // 禁止软键盘弹出
      document.activeElement.blur()
    },
    search() {
      this.loading = true
      this.submiting = true
      const bol =
        /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(
          this.cardNumber
        )
      if (this.cardNumber) {
        if (bol) {
          this.submiting = false
          // 接口读完
          this.loading = false
          return
        } else {
          this.$toast.fail('身份证格式不正确')
          this.submiting = false
          // 接口读完
          this.loading = false
        }
      }

      setTimeout(() => {
        this.submiting = false
        // 接口读完
        this.loading = false
      }, 1000)
    },
    onFinish({ selectedOptions }) {
      this.show = false
      this.fieldValue = selectedOptions.map((option) => option.text).join('')
    }
  }
}
</script>
<style scoped>
.act {
  width: 60px;
}
.tab-ul {
  padding: 10px 0 0 0;
}
.search {
  width: calc(100% - 20px);
  margin: 5px auto;
  height: 175px;
  line-height: 175px;
  background: #4a90e2;
  border-radius: 17px;
  color: #fff;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
}
.li-right p,
.li-right h3 > span {
  font-size: 18px;
}
</style>
